<template>
	<view class="study">
	<!-- 包含search、banner、subnav、nav、slide五个部分 -->
	<!-- 部分1：search -->
		<view class="search">
			<input type="text" placeholder="搜索错题/收藏" />
			<image src="../../static/icons/search.png" mode=""></image>
		
		</view>
		<!-- 部分2：banner -->
		<view class="banner">
		<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item>
							<view class="swiper-item uni-bg-red">
								<!-- <view class="text1">笔试冲刺陪考</view>
								<view class="text2">2023下半年软件等级考试</view>
								<view class="text3">考前伴航 临时突破！</view> -->
								<image src="https://s1.ax1x.com/2023/03/21/ppa1S1g.md.jpg"></image>
							</view>
						</swiper-item>
						<swiper-item>
							
							<view class="swiper-item uni-bg-green">
								<!-- <view class="text1">笔试冲刺陪考</view>
							<view class="text2">2023下半年软件等级考试</view>
							<view class="text3">考前伴航 临时突破！</view> -->
								<image src="https://s1.ax1x.com/2023/03/21/ppalz9S.md.jpg"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">
								<!-- <view class="text1">笔试冲刺陪考</view>
								<view class="text2">2023下半年软件等级考试</view>
								<view class="text3">考前伴航 临时突破！</view> -->
								<image src="https://s1.ax1x.com/2023/03/21/ppalvh8.md.jpg"></image>
								
								
							</view>
						</swiper-item>
					</swiper>
				</view>
				</view>
		<!-- nav -->
		
		<!-- 部分3：nav -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view class="nav_icon">	
				<text>{{item.sNav}}</text>
				<image :src="item.image"></image>
				</view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- nav end -->
		<view class="control"></view>
		<view class="oneWords">
			<view class="words" @click="wordsClick(url)">
				<image src="../../static/icons/jiantou.png" mode="" class="imgnew"></image>
				<view class="textall">
				<text class="text1">每日</text>
				<text class="text2">一题</text>
				</view>
				<view class="long">|</view>
				<view class="ret">热门</view>
				<text class="text3">点击查看今日热题！</text>
				
			</view>
		
		</view>
		<view class="control"></view>
		<!-- grow -->
		<view class="grow">
			<view class="title">
				能力提升
			</view>
			<view class="grow_item">
				<view class="mistake" @click="mistakeClick(url)">
					<image src="../../static/icons/jiantou.png" mode="" class="img1"></image>
					<image src="../../static/imgs/无发票.png" mode="" class="img2"></image>
					
					<text class="growNav">错题集</text>
					<text class="growLittle">巩固学习</text>
					<view class="hr"></view>
				</view>
				<view class="prove">
					<view class="book" @click="bookClick(url)">
						<image src="../../static/icons/jiantou.png" mode="" class="img1"></image>
						<image src="../../static/imgs/无企业.png" mode="" class="img2"></image>
						<text class="growNav">书屋</text>
						<text class="growLittle">丰富知识眼界</text>
						<view class="hr"></view>
					</view>
					<view class="note" @click="noteClick(url)">
						<image src="../../static/icons/jiantou.png" mode="" class="img1"></image>
						<!-- <image src="../../static/imgs/无发票.png" mode="" class="img2"></image> -->
						<text class="growNav">学习笔记</text>
						<text class="growLittle">好记性不如烂笔头</text>
						<view class="hr"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- grow end -->
		
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navs:[
					{
						image:"../../static/icons/exam.png",
						title:"模拟试题",
						sNav:"试题",
						path:'/pages/study/exam/exam'
					},
					{
						image:"../../static/icons/test.png",
						title:"每日一练",
						sNav:"练习",
						path:'/pages/study/test/test'
					},
					{
						image:"../../static/icons/break.png",
						title:"做题闯关",
						sNav:"闯关",
						path:'/pages/study/break/break'
					},
					{
						image:"../../static/icons/video.png",
						title:"视频学习",
						sNav:"视频",
						path:'/pages/study/video/video'
					}
				]
			}
		},
		methods: {
			navItemClick(url){
				uni.navigateTo({
					url
				})
			},
			mistakeClick(){
				uni.navigateTo({
					url:'/pages/study/mistake/mistake'
				})
			},
			bookClick(){
				uni.navigateTo({
					url:'/pages/study/book/book'
				})
			},
			noteClick(){
				uni.navigateTo({
					url:'/pages/study/note/note'
				})
			},
			wordsClick(){
				uni.navigateTo({
					url:'/pages/study/words/words'
				})
			}
		}
	}
</script>

<style lang="scss">
.study{
	padding-left: 20rpx;
	padding-right: 20rpx;
	font-family: "微软雅黑";
	.search{
		margin-bottom: 30px;
		input{
			border: 1px solid #e1e1e1;
			border-radius: 2em;
			height: 40px;
			margin-top: 10px;
			padding-left: 20px;
			padding-right: 20px;
			position: relative;
			
		}
		image{
			position: absolute;
			top: 10px;
			right: 30px;
			width:50rpx;
			height: 50rpx;
		}
	}
	
	.banner{
		 border-radius: 2em;
		 // background-color: #ff8fbc
	}
	 .swiper-item{
		 margin-top: -50px;
		
		width: 350px;
		height: 280px;
		background-color: #539eff;
	 
	}
    .swiper-item image{
	position: relative;
		width: 100%;
		height: 100%;
	}
	
	.nav{
		// border-bottom: 10px solid #f4f4f4;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		.nav_item{
			text-align: center;
			height: 150rpx;
			text{
				font-size: 13px;
				color:#464646;
				
			}
			.nav_icon{
				width: 120rpx;
				height: 120rpx;
				margin: auto;
				border-radius: 40rpx;
				text-align: center;
				position: relative;
				overflow: hidden;
				text{
					font-size: 14px;
					top:20px;
					// margin-top: 280rpx;
					color: #ffffff;
					font-weight: bold;
				}
				image{
					width: 46rpx;
					height: 46rpx;
					position: absolute;
					bottom: 20rpx;
					right: 34rpx;
				}
			}
			
			&:nth-child(1){
				.nav_icon{
					background-color: #4aca00;
					
				}
			}
			&:nth-child(2){
				.nav_icon{
					background-color: #7c00ba;
					
				}
			}
			&:nth-child(3){
				.nav_icon{
					background-color: #fca800;
					
				}
			}
			&:nth-child(4){
				.nav_icon{
					background-color: #0053fa;
					
				}
			}	
		}
	}
    .title{
    	font-size: 16px;
    	letter-spacing: 2px;
    	margin-top: 40rpx;
        margin-bottom: 20rpx;
    }
	
	.grow{
		.grow_item{
			display: flex;
			color:#8b827d;
			font-size: 18px;
			letter-spacing: .6px;
			
			// image{
			// 	width:50rpx;
			// 	height: 50rpx;
			// }
			.growLittle{
				font-size: 28rpx;
			color:#8b827d;
			}
			.growNav{
				display: block;
				font-size: 20px;
				font-weight: bold;
			}
			.mistake{
				height: 500rpx;
				width: 50%;
				border-radius: 40rpx;
				background-color: rgb(169, 216, 249);
				margin-right: 20rpx;
				color: rgb(62, 115, 152);
				position: relative;
				padding-left: 30rpx;
				background-size: cover;
				.img1{
					position: absolute;
					top: 200rpx;
					left: 30rpx;
					width: 60rpx;
					height: 60rpx;
					
				}
				.img2{
					position: absolute;
					top: 120rpx;
					right: 4rpx;
					width: 220rpx;
					height: 220rpx;
					opacity: 0.6;
					border-radius: 3em;
				}
				.growNav{
					padding-top: 80rpx;
				}
				.hr{
					position: absolute;
					bottom: 0;
					right: 0;
					background-color: #fff;
					opacity: 0.6;
					border-top: #fff solid ;
					
				}
				
			}
			.prove{
				height: 500rpx;
				width:50%;
				.book{
					height: 300rpx;
					border-radius: 40rpx;
					background: #efb14d;
					margin-bottom: 20rpx;
					position: relative;
					color: rgb(105, 63, 71);
					background-color: #f8b38d;
					padding-left: 20rpx;
					background-size: cover;
					.img1{
						position: absolute;
						top: 160rpx;
						left: 30rpx;
						width: 50rpx;
						height: 50rpx;
					}
					.img2{
						position: absolute;
						top:40rpx;
						right: 0rpx;
						width: 140rpx;
						height: 140rpx;
						opacity: 0.6;
						border-radius: 3em;
					}
					.growNav{
						padding-top: 40rpx;
					}
				}
				.note{
					
					height: 180rpx;
					border-radius: 50rpx;
					background-color: #f48990;
					padding-left: 20rpx;
					position: relative;
					color: #915e45;
					.img1{
						position: absolute;
						top: 20rpx;
						right: 10rpx;
						width: 80rpx;
						height: 80rpx;
						opacity: 0.8;
					}
					.img2{
						position: absolute;
						top: 20rpx;
						right: 0rpx;
						width: 100rpx;
						height: 100rpx;
						opacity: 0.6;
						border-radius: 3em;
					}
					.growNav{
						padding-top: 20rpx;
						font-size: 18px;
					}
					.growLittle{
						font-size: 24rpx;
						color:#8b827d;
						letter-spacing: 1rpx;
					}
				}
			}
		}
	}
	
	// .control{
	// 	background-color: #f1f1f1;
	// 	width: 100%;
	// 	height: 10rpx;
	// }
	.oneWords{
		height: 40px;
		width: 100%;
		
		.words{
	margin-top: 20px;
	border-radius: 10px;
	height: 40px;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 40px;
	
	background-color: #f7f7f7;
	position: relative;
	.textall{
		margin-top: -10px;
		float: left;
		font-size: 16px;
		font-weight: bold;
		.text1{
			color: #0053fa;
			
		}
		.text2{
			margin-top: -20px;
			display: block;
			color: black;
		}
	}
	.ret{
		margin-top: 12px;
		font-size: 13px;
		width: 60rpx;
		height: 30rpx;
		margin-left: 30rpx;
		float: left;
		border-radius: 10rpx;
		color: #0053fa;
		border: 1px solid;
		line-height: 30rpx;
		
	}
	.text3{
		margin-left: 30rpx;
		float: left;
		color: #bcbcbc;
	}
	.long{
		float: left;
		margin-left: 40rpx;
	}
	.imgnew{
		position: absolute;
		right: 10rpx;
		top:18rpx;
		width: 50rpx;
		height: 50rpx;
		
	}
}
}
}
</style>
